<template>
  <div class="applyFor">
    <div class="applyTop">
      <h3>新员工申请</h3>
    </div>

    <div class="applyCenter">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <div class="left">
          <el-form-item label="姓名">
            <el-input
              v-model="formInline.name"
              placeholder="请输入姓名"
            ></el-input>
          </el-form-item>
          <el-form-item label="身份证号">
            <el-input
              v-model="formInline.id"
              placeholder="请输入身份证号"
            ></el-input>
          </el-form-item>
          <el-form-item label="所在单位">
            <el-select
              v-model="formInline.company"
              placeholder="光明杭州分公司"
            >
              <el-option
                label="光明杭州分公司"
                value="光明杭州分公司"
              ></el-option>
              <el-option label="光明公司总部" value="光明公司总部"></el-option>
              <el-option
                label="光明公司北京分公司"
                value="光明公司北京分公司"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任职时间">
            <el-select
              v-model="formInline.year"
              placeholder="2022"
              style="width: 60px"
            >
              <el-option
                v-for="item in year"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-model="formInline.month"
              placeholder="1"
              style="width: 50px"
            >
              <el-option
                v-for="item in month"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <el-select
              v-model="formInline.day"
              placeholder="1"
              style="width: 50px"
            >
              <el-option
                v-for="item in day"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="设置账号">
            <el-input
              v-model="formInline.account"
              placeholder="请输入设置的账号"
            ></el-input>
          </el-form-item>
          <el-form-item label="绑定手机" style="width: 230px">
            <el-input
              v-model="formInline.num"
              placeholder="请输入绑定的手机号"
            ></el-input>
          </el-form-item>
        </div>
        <div class="center">
          <el-form-item label="民族" style="width: 78px; margin-right: 2px">
            <el-select
              v-model="formInline.region"
              placeholder="汉"
              style="width: 62px"
            >
              <el-option
                v-for="item in list"
                :key="item.value"
                :label="item.info"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="婚姻状况" style="width: 114px">
            <el-select
              v-model="formInline.marry"
              placeholder="未婚"
              style="width: 84px"
            >
              <el-option label="未婚" value="未婚"></el-option>
              <el-option label="已婚" value="已婚"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="formInline.num2"
              placeholder="请输入联系电话"
            ></el-input>
          </el-form-item>
          <el-form-item label="担任职务">
            <el-select v-model="formInline.job" placeholder="产品经理">
              <el-option
                v-for="item in job"
                :key="item.value"
                :label="item.info"
                :value="item.info"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="单位负责人">
            <el-input v-model="formInline.ren" placeholder=""></el-input>
          </el-form-item>
          <el-form-item label="设置密码">
            <el-input
              v-model="formInline.input"
              type="password"
              placeholder="请设置密码"
              show-password
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit1"> 发送验证码</el-button>
            <el-button type="primary" @click="onSubmit2">提交申请</el-button>
          </el-form-item>
        </div>
        <div class="right">
          <Photo />
        </div>
      </el-form>
    </div>

    <div class="applyBottom">
      <h3>申请记录</h3>
      <el-table
        :data="tableData"
        height="200"
        style="width: 100%; font-size: 12px; display: flex"
      >
        <el-table-column prop="name" label="name" />
        <el-table-column prop="job" label="Job" />
        <el-table-column prop="num" label="Num" />
        <el-table-column prop="input" label="input" />
        <el-table-column prop="apply" label="Apply" />
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  ElTable,
  ElTableColumn,
  ElForm,
  ElFormItem,
  ElInput,
  ElSelect,
  ElButton,
  ElOption,
} from "element-plus";
import { reactive, ref, computed, onMounted } from "vue";
import Photo from "./Photo.vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const list = computed(() => store.state.nationList);
    const job = computed(() => store.state.joblist);
    const input = ref("");
    const formInline = reactive({
      name: "",
      id: "",
      input: "",
      region: "",
      marry: "",
      num2: "",
      company: "",
      job: "",
      account: "",
      ren: "",
      num: "",
      year: "",
      month: "",
      day: "",
    });
    const tableData = reactive([
      {
        name: "杜晓小",
        job: "职员",
        num: "15433339990",
        input: "vyusa12345667",
        apply: "正在审核",
      },
    ]);
    onMounted(() => {
      const myDate = new Date();
      const years = myDate.getFullYear();
      initSelectYear(years);
    });
    const year = [];
    const month = [];
    const day = [];
    const initSelectYear = (years) => {
      for (let i = 0; i < 31; i++) {
        year.push({ value: years - i, label: years - i });
        day.push({ value: i + 1 });
        console.log(day);
      }
      for (let j = 1; j < 13; j++) {
        month.push({ value: j });
      }
      console.log(year);
    };
    const onSubmit2 = () => {
      tableData.forEach((item) => {
        item.name = formInline.name;
        item.job = formInline.job;
        item.num = formInline.num;
        item.input = formInline.input;
      });
      console.log(tableData);
    };
    return {
      tableData,
      formInline,
      input,
      list,
      job,
      year,
      month,
      day,
      onSubmit2,
    };
  },
  components: {
    ElTable,
    ElTableColumn,
    ElForm,
    ElFormItem,
    ElInput,
    ElSelect,
    ElButton,
    Photo,
    ElOption,
  },
};
</script>

<style lang='less' scoped>
h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.applyFor {
  width: 50%;
  padding: 10px;
  background-color: #fff;
  float: left;
}
// 申请表单
.applyCenter {
  width: 100%;
  height: 60%;
  background: #fff;
  .left {
    width: 43%;
    float: left;
  }
  .center {
    width: 38%;
    float: left;
  }
  .right {
    width: 19%;
    height: 100px;
    float: left;
  }
}
/deep/.el-input--suffix {
  font-size: 12px;
}
/deep/.el-input__inner {
  font-size: 12px;
}
/deep/.el-form-item--default {
  font-size: 12px;
}
/deep/.el-form-item__label {
  font-size: 12px;
}
/deep/.el-input__inner {
  font-size: 12px;
  padding: 0 0 0 4px;
}
// 下方表格
/deep/.el-table thead {
  display: none;
  border: none;
}
button {
  font-size: 12px;
}
</style>